<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :keyboard="false"
    :forceRender="true"
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 50%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        取消
      </a-button>
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
    <a-form :form="form">
      <a-form-item  label="渠道名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
         {{model.name}}
      </a-form-item>
    </a-form>
  </a-spin>
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import JUpload from '@/components/jeecg/JUpload'
import JImageUpload from '@/components/jeecg/JImageUpload'
export default {
  name: 'EngineerProduceDetail',
  components: {
    JImageUpload,
    JUpload
  },
  data () {
    return {
      title:"详情",
      visible: false,
      isReadOnly: false,
      modalWidth:600,
      drawerWidth:600,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      uploadLoading:false,
      confirmLoading: false,
      headers:{},
      dataSource: [],
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token}
  },
  methods: {
    show(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.model = Object.assign({}, record);
        this.form.setFieldsValue(pick(this.model,'name'))
      });
    },

    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close');
      this.visible = false;
    }
  }
}
</script>

<style lang="less" scoped>
@import "chart";
</style>